<template>
    <div class="exchange-drawer">
        <el-drawer :visible.sync="exchangeDrawer" direction="rtl" size="512px" :before-close="close">
            <template slot="title">
                <span style="font-size: 16px;font-weight: 600;color: #333;">申请换货</span>
            </template>
            <el-form ref="exchangeForm" :model="exchangeForm" :rules="rules">
                <el-row :gutter="gutter">
                    <el-col :span="14">
                        <el-form-item label="订单项：" prop="id"
                            style="margin-bottom: 0 !important;font-weight: 700;font-size: 16px;margin-left: 32px;">
                            <div class="item">{{ exchangeForm.id }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="下单日期：" prop="date" style="margin-bottom: 0 !important;color: #666;">
                            <div class="item">{{ exchangeForm.date }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="dialog-main">
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="型号：" prop="model">
                                <div class="item">{{ exchangeForm.model }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="品牌：" prop="brand">
                                <div class="item">{{ exchangeForm.brand }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="数量：" prop="number">
                                <div class="item">{{ exchangeForm.number }} </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="批次：" prop="batch">
                                <div class="item"> {{ exchangeForm.batch }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="封装：" prop="package">
                                <div class="item"> {{ exchangeForm.package }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="单价：" prop="price">
                                <div class="item">{{ exchangeForm.price }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="币种：" prop="currency">
                                <div class="item">{{ exchangeForm.currency }} </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="订单金额：" prop="money">
                                <div class="item" style="color:red">{{ exchangeForm.money }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="交货日期：" prop="goodDate">
                                <div class="item">{{ exchangeForm.goodDate }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="交货地：" prop="address">
                                <div class="item">{{ exchangeForm.address }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="包装：" prop="packing">
                                <div class="item">{{ exchangeForm.packing }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="发票类型：" prop="invoiceType">
                                <div class="item"> {{ exchangeForm.invoiceType }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="14">
                            <el-form-item label="运单号：" prop="waybillNo">
                                <div class="item"> {{ exchangeForm.waybillNo }} </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="换货数量"
                            style="margin-bottom:0 !important;margin-left:32px;font-size:14px;font-weight:700;">
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter" style=" margin: 10px 20px 10px 32px;">
                    <el-form-item label="申请数量：" prop="num" style="margin-bottom:0 !important;">
                        <el-input type="number" v-model="exchangeForm.num" style="width: 78%;" size="small"></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter="gutter" style=" margin: 10px 20px 10px 32px;">
                    <el-form-item label="交货时间：" prop="time" style="margin-bottom:0 !important;">
                        <el-date-picker v-model="exchangeForm.time" type="date" placeholder="年-月-日" style="width: 78%;"
                            size="small">
                        </el-date-picker>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="退货原因"
                        style="margin-bottom:0 !important;margin-left:32px;font-size:14px;font-weight:700;">
                        <el-input type="textarea" placeholder="请输入退货原因" rows="6" maxlength="120" show-word-limit
                            style="width:95%"></el-input>
                    </el-form-item>
                </el-row>
                <el-form-item style="text-align: right;margin-right: 22px;margin-top: 50px;">
                    <el-button style="background:#004FEE;color:#fff;" size="small">确认</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
export default {
    name: "exchangeDrawer",
    props:["exchangeDrawer"],
    data() {
        return {
            gutter: 5,
            span: 12,
            exchangeForm: {
                id: "DD22020000295-001",
                date: "2023-02-20",
                model: "H1",
                brand: "KEMET",
                number: "100",
                batch: "1",
                package: "XXXW95",
                price: "10",
                currency: "人民币",
                money: "1000",
                goodDate: "2023-02-28",
                address: "北京",
                packing: "散装",
                invoiceType: "普通发票",
                waybillNo: "DD22020000295-001",
                num: "",
                time:""
            },
            rules: {
                num:[{ required: true, message: '请选择数量', trigger: 'change' }],
                time:[{ required: true, message: '请选择时间', trigger: 'change' }],
            }
        }
    },
    methods:{
        close(){
            this.$emit("close")
        }
    }
}
</script>

<style scoped lang="scss">
.exchange-drawer{
    .dialog-main {
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 10px 20px;
        margin: 7px 29px 22px 32px;

        .el-form-item {
            margin-bottom: 0 !important;
        }

        ::v-deep .el-form-item__label {
            color: #eee;
        }

        .item {
            text-align: end;
            margin-right: 20px;
            font-size: 12px;
            color: #333;
        }
    }
}
</style>